<template>

  <div>

    <Row>
      <Card>
        <div class="top-tool-bar clearfix">

          <Select v-model="model1" style="width:150px" placeholder="调度人员">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <Select v-model="model1" style="width:150px" placeholder="订单状态">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          &nbsp;&nbsp;&nbsp;&nbsp;订单生成时间&nbsp;&nbsp;
          <Date-picker type="date" placeholder="选择日期" style="width: 150px"></Date-picker>
          &nbsp;&nbsp; 到&nbsp;&nbsp;
          <Date-picker type="date" placeholder="选择日期" style="width: 150px"></Date-picker>
          &nbsp;&nbsp;&nbsp;&nbsp;订单状态&nbsp;&nbsp;

          <Input v-model="value" placeholder="请输入需求站点名称" style="width: 150px"></Input>

          <Button type="primary" icon="ios-search" class="pull-right margin-left-10" loading @click.prevent.stop="search()">搜索</Button>

        </div>


        <Table border :columns="columns4" :data="data1"></Table>

        <Page :total="40" show-elevator show-sizer @on-change="changePage"></Page>

      </Card>
    </Row>

  </div>

</template>

<style scoped>
  .pull-right{margin-left: 10px;}
</style>

<script type="text/ecmascript-6">

    import util from '@/libs/util';

  export default {
    data () {
      return {
        loading: true,
        showTip:false,
        list: {},
        cityList: [
          {
            value: 'beijing',
            label: '北京市'
          },
          {
            value: 'shanghai',
            label: '上海市'
          },
          {
            value: 'shenzhen',
            label: '深圳市'
          },
          {
            value: 'hangzhou',
            label: '杭州市'
          },
          {
            value: 'nanjing',
            label: '南京市'
          },
          {
            value: 'chongqing',
            label: '重庆市'
          }
        ],
        model1: '',
        value: '',
        option:{},
        columns4: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '配送单编号',
            key: 'name1'
          },
          {
            title: '配送顺序',
            key: 'name2'
          },
          {
            title: '需求量',
            key: 'name3'
          },
          {
            title: '预配送量',
            key: 'name4'
          },
          {
            title: '调度人员',
            key: 'name5'
          },
          {
            title: '预送达时间',
            key: 'name6'
          },
          {
            title: '订单签收时间',
            key: 'name7'
          },
          {
            title: '状态',
            key: 'name8'
          },
          {
            title: '操作',
            key: 'action',
            width: 100,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      console.log(JSON.stringify(params));
                    }
                  }
                }, '详情')
              ]);

            }
          }
        ],
        data1: [
          {
            name1: 111200450,
            name2: 'XX加气站→XX加气站→XX加气站',
            name3: 'XXLNG加气站',
            name4: '20m²',
            name5: '15m²',
            name6: '张大山',
            name7: '2017-07-11 17：37：58',
            name8: '待处理',
            name9: '手动',
          },
          {
            name1: 111200450,
            name2: 'XX加气站→XX加气站→XX加气站',
            name3: 'XXLNG加气站',
            name4: '20m²',
            name5: '15m²',
            name6: '张大山',
            name7: '2017-07-11 17：37：58',
            name8: '已签收',
            name9: '手动',
          },
        ]
      }
    },
    methods: {
      cancelStopOrderModal(){

      },
      changePage(num){
        console.log(num);
      },
      goBack () {
        this.$router.push({path: '/home'});
      },
      getList () {
        let $this = this;
        let params = {};
        $this.$emit('showLoading');
        api.fetchPost(api.path.in_theaters, params).then((data) => {
          //console.log(JSON.stringify(data));
          $this.$emit('hideLoading');
          data.subjects.forEach(function (e) {
            let item = {
              id: 0,
              title: '',
              rating: '',
            };
            item.id = e.id;
            item.title = e.title;
            item.rating = e.rating.average;
            $this.data1.push(item);
          });
        }).catch(err => {
          $this.$emit('hideLoading');
          this.$Message.error(err);
        })
      },
      add(){
        this.$router.push({path: `/orderDistribution/detail`});
      },
      del(){

      },
      goToDetail(params){
        this.$router.push({path: `/movie/detail/${params.row.id}`});
      }
    },
    beforeMount () {

    },
    mounted() {
      //this.getList();
    },
  };
</script>
